.card{
  padding: var(--gap);
  border-radius: var(--radius);
  background: var(--accents-1);
  border: 1px solid var(--accents-2);
  cursor: pointer;
}
.card.card-section{
  transition: box-shadow .2s ease;
  background: var(--background);
}
.card:hover{
  background: var(--background);
  box-shadow: var(--shadow-small);
  outline: 0;
}
.card .card__header{
  margin-top: var(--space-mini);
}
.card.card-slim{
  padding: 0;
}
.card.card-slim .card__header{
  margin: 0;
  padding: var(--gap-half);
}
.card__header .card__title{
  font-size: 1rem;
  color: var(--foreground);
  font-weight: bold;
}
.card__header .card__subtitle{
  font-size: 00.875rem;
  color: var(--accents-5);
  font-weight: normal;
  margin-top: var(--space-2x);
}